<template>
	<div>
		<el-select
			v-model="coding"
			:clearable="clearable"
			:multiple="multiple"
			:disabled="isDisabled"
			:filterable="filterable"
			:placeholder="placeholder"
			@change="changeState"
			@blur="onblur()"
			@clear="onclear()"
			@focus="onfocus()"
			@visible-change="visibleChange"
			@remove-tag="removeTag()"
			style="width:100%"
			@input="change($event)"
		>
			<template v-for="(item,index) in options">
			<el-option
			:key="item.key"
			:label="item.value"
			:value="item.key"
			v-show="exclude.indexOf(index)==-1"
			v-if="!excludeIsKey.includes(item.key)"
			/>
			</template>
		</el-select>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onBeforeMount, watch, nextTick, defineComponent } from 'vue'
import {systemApi} from '/@/api/systemapi'
import { getDicObject } from '/@/utils/cacheDict'
export default defineComponent({
	name: 'dicSelect',
	props: {
		modelValue: [String, Array],
		dicCode: String,
		clearable: {
			type: Boolean,
			default: () => true
		},
		multiple: {
			type: Boolean,
			default: () => false
		},
		filterable: {
			type: Boolean,
			default: () => false
		},
		placeholder: {
			type: String,
			default: () => ''
		},
		exclude: {
			type: Array,
			default: () => []
		},
		excludeIsKey: {
			type: Array,
			default: () => []
		},
		isDisabled: {
			type: Boolean,
			default: false
		},
		isDepartment: {
			type: Boolean,
			default: false
		},
		customData: {
			type: Array,
			default: () => []
		},
		isTenantSelect: {
			type: Boolean,
			default: false
		}
	},
	emits:['update:modelValue', 'change', 'onblur', 'onclear', 'onfocus', 'visibleChange', 'removeTag', 'input'],
	setup(props, ctx) {
		const state = reactive({
			options: [],
			coding: props.multiple
				? props.modelValue.split(',').filter((val: any) => {
				return val
				})
				: props.modelValue
		}) 
		if (props.isDepartment) {
			//暂未支持
		} else if (props.dicCode) {
			getDicObject(props.dicCode, (val: any) => {
				state.options = val
			})
		} else if (props.isTenantSelect){
			systemApi().getTenantSelect().then(data => {
				if (data && data.code === 0) {
					state.options = data.list
				}
			})
		} else if (props.customData.length > 0) {
			state.options = props.customData
		}
		// 页面加载时
		onBeforeMount(() => {
		})
		const changeState = (aa: any) => {
			ctx.emit("update:modelValue", aa)
			ctx.emit('change', aa)
		}
		const onblur = () => {
			ctx.emit('onblur', function () {})
		}
		const onclear = () => {
			ctx.emit('onclear', function () {})
		}
		const onfocus = () => {
			ctx.emit('onfocus', function () {})
		}
		const visibleChange = (is: any) => {
			ctx.emit('visibleChange', is)
		}
		const removeTag = () => {
			ctx.emit('removeTag', function () {})
		}
		const change = (val: any) => {
			val = props.multiple ? val.join(',') : val
			ctx.emit('input', val)
		}
		watch(() => props.modelValue, (val) => {
			if (!val) {
				state.coding = null
			} else {
				state.coding = props.multiple ? val.split(',') : val
			}
		})
		watch(() => props.customData, (val) => {
			if (val.length > 0) {
				state.options = val
			}
		})
		return {
			changeState,
			onblur,
			onclear,
			onfocus,
			visibleChange,
			removeTag,
			change,
			...toRefs(state),
		}
	}
})
</script>